<template>
  <div class="softwareLibrary-container">
    <el-row class="softwareLibrary-row">
      <el-col :span="12" style="margin-bottom:28px">
        <li @click="tabChange('0')"><span :class="{'bagPop': tabActive == 0,'tabli': true}">全部软件</span><el-divider direction="vertical" /></li>

        <li
          v-for="(item,index) in options"
          :key="item.id"
          @click="tabChange(item.id)"
        >
          <span :class="{'bagPop': tabActive == item.id,'tabli': true}">{{ item.name }}</span>
          <el-divider v-if="index+1 < options.length" direction="vertical" />
          <!-- <el-divider v-if="index+1 == options.length && userInfo.roleType == 1" direction="vertical" /> -->
        </li>
        <!-- <li v-if="userInfo.roleType == 1">
          <span :class="{'bagPop': tabActive == 55904214559285248,'tabli': true}" @click="dialogTableVisible = true">类型管理</span></li> -->
      </el-col>
      <el-col :span="12" style="margin-bottom:20px">
        <el-row>
          <!-- <el-col :span="8" style="text-align: right;padding-right: 20px">
            <el-button
              size="mini"
              type="primary"
              style="height: 28px;font-size: 10px"
              @click="upSoftInfo"
            >上传已安装软件信息</el-button></el-col> -->
          <el-col :span="24" style="text-align: right;">
<!--            <el-button-->
<!--              size="mini"-->
<!--              type="primary"-->
<!--              style="margin-right: 12px;"-->
<!--              @click="upSoftInfo"-->
<!--            >上传已安装软件信息</el-button>-->
            <!-- <el-select
              v-model="listQuery.departId"
              style="width:130px;padding-right:12px"
              placeholder="请选择软件所属部门"
              size="mini"
              clearable
              @change="queryDepartC"
            >
              <el-option
                v-for="item in options10"
                :key="item.id"
                style="display: list-item;"
                :label="item.name"
                :value="item.id"
              />
            </el-select> -->
            <!-- <el-input
              v-model="listQuery.search"
              style="width:130px;padding-right:12px"
              :placeholder="placeholderName"
              size="mini"
            />
            <el-button size="mini" type="primary" @click="getList">
              搜索
            </el-button> -->
          </el-col>
          <!-- <el-col :span="7" style="text-align: right;padding-right:20px">
            <el-select
              v-model="listQuery.departId"
              placeholder="请选择部门"
              size="mini"
              clearable
              @change="queryDepartC"
            >
              <el-option
                v-for="item in options10"
                :key="item.id"
                style="display: list-item;"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="7">
            <el-input
              v-model="listQuery.search"
              placeholder="请输入软件名称"
              size="mini"
            >
              <i slot="suffix" class="el-input__icon el-icon-search" @click="getList" />
            </el-input>
          </el-col> -->
        </el-row>
      </el-col>
    </el-row>
    <el-dialog
      title="类型管理"
      :visible.sync="addTypedialogV"
      width="25%"
      center
    >
      <el-form
        label-width="100px"
        size="mini"
      >
        <el-form-item label="类型名称:">
          <el-input v-model="typeName" :maxlength="4" :minlength="2" />
        </el-form-item>
        <el-form-item label="说明:">
          <el-input v-model="typeDec" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="addNewType">确 定</el-button>
        <el-button size="mini" @click="addTypedialogV = false">取 消</el-button>
      </span></el-dialog>
    <el-dialog
      title="软件类型管理"
      :visible.sync="dialogTableVisible"
      width="500"
    >
      <el-button
        type="primary"
        size="mini"
        style="margin-bottom: 20px"
        @click="addNewType('add')"
      >新增类型</el-button>
      <el-table
        :data="options"
        style="width: 100%;
        max-height: 360px;
        overflow: scroll;"
      >
        <el-table-column label="类型名称" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="修改时间">
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="说明">
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="addNewType('edit',scope.row)"
            >编辑</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="addNewType('del',scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-table
      v-loading="listLoading"
      element-loading-text="正在加载中..."
      element-loading-background="rgba(0, 0, 0, 0.5)"
      :data="list"
      style="width: 100%"
    >
      <el-table-column width="300px" label="软件名称">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              <el-image
                v-if="scope.row.icon != ''"
                style="width: 48px; height: 48px;margin-right: 10px; float:left"
                :src="scope.row.icon || '../../assets/images/logMoren.png'"
                fit="fit"
              />
              <img
                v-if="scope.row.icon == ''"
                style="width: 48px; height: 48px;margin-right: 10px; float:left"
                src="../../assets/images/logMoren.png"
                fit="fit"
              >
              <div>{{ scope.row.displayName }}</div>
              <div class="desc">{{ scope.row.remark }}</div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <!-- <el-table-column label="软件大小">
        <template slot-scope="scope" >
          <el-popover trigger="hover" placement="top">
            <p>详细大小: {{ scope.row.size }}</p>
            <div slot="reference" class="name-wrapper">
              <span>{{ scope.row.size }}</span>
            </div>
          </el-popover>
        </template>
      </el-table-column> -->
      <el-table-column label="安装路径" >
        <template slot-scope="scope">
          <span class="strinExceeds" :title="scope.row.installLocation">{{ scope.row.installLocation }}</span>
        </template>
      </el-table-column>
      <el-table-column width="200" label="安装时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="使用频次" width="100px">-->
<!--        <template slot-scope="scope">-->
<!--          <span>0次</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <!-- <el-table-column>
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="handleDetails(scope.row)"
          >详情</el-button>
        <el-button
          type="text"
          size="mini"
          data-clipboard-action="copy"
          class="cobyOrderSn"
          :data-clipboard-text="scope.row.downloadUrl"
          @click="copySpecialTopicUrl(scope.row)"
        >复制下载地址</el-button>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="200"  align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >一键卸载</el-button>
          <!--            <el-button-->
          <!--              v-if="scope.row.isDownload"-->
          <!--              size="mini"-->
          <!--              @click="handleEdit(scope.$index, scope.row)"-->
          <!--            >一键卸载</el-button>-->
          <!--            <el-button-->
          <!--              v-else-->
          <!--              size="mini"-->
          <!--              type="danger"-->
          <!--              @click="handleDelete(scope.$index, scope.row)"-->
          <!--            >一键卸载</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import { softList, softAdd, softDel, softPut, softInstallList, softTypeList
  , softTypeAdd, softTypeDel, softTypePut } from '@/api/softManage'
import Pagination from '@/components/Pagination'
import {
  departmentList } from '@/api/department'
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  components: {
    Pagination
  },
  computed: {
    ...mapGetters([
      'name',
      'userInfo'
    ])
  },
  created() {
    // this.getTypeList()
    this.getDepartmentList()
    this.fetchData()
  },
  data() {
    return {
      typeCache: {},
      typeDec: '',
      typeName: '',
      addTypedialogV: false,
      dialogTableVisible: false,
      listLoading: false,
      addTypeName: '',
      visible: false,
      options10: [],
      options: [
        {
          id: 1,
          name: '库内软件'
        },
        {
          id: 2,
          name: '库外软件'
        }
      ],
      total: 10,
      listQuery: {
        departId: '',
        page: 1,
        limit: 10,
        typeId: '',
        type: '0',
        search: ''
      },
      list: null,
      tabActive: '0',
      tableData: [{
        isDownload: false,
        details: '软件说明',
        size: '***M',
        name: '天霸1号',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        isDownload: true,
        details: '软件说明',
        size: '***M',
        name: '天霸2号',
        address: '上海市普陀区金沙江路 1517 弄'
      }],
      activeName: 'allSoftware',
      placeholderName: '请输入软件名称'
    }
  },
  methods: {
    getDepartmentList() {
      departmentList({
        limit: 50,
        page: 1
      }).then(res => {
        if (res.code === 200) {
          this.options10 = []
          res.data.data.map(item => {
            if (item.id !== '1025' && item.id !== '55904214559285248') {
              this.options10.push(item)
            }
          })
        }
      })
    },
    queryDepartC(val) {
      if (val) {
        this.placeholderName = '全部软件'
      } else {
        this.placeholderName = '全部软件'
      }
      // this.getList()
    },
    upSoftInfo() {
      this.$get('http://localhost:9007/softinfo/', {
        cmd: 'upload'
      }).then(res => {
        this.$message.success('发送请求成功，已开始上传')
      })
    },
    addNewType(params, params1) {
      if (params === 'add') {
        this.addTypedialogV = true
      } else if (params === 'del') {
        this.$confirm('确定删除吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          softTypeDel({
            ids: params1.id
          }).then(res => {
            if (res.code === 200) {
              this.$message.success('删除成功')
              this.getTypeList()
            }
          })
        }).catch(() => {
          this.$message.info('已点击取消')
        })
      } else if (params === 'edit') {
        this.typeCache = params1
        this.typeName = params1.name
        this.typeDec = params1.remark
        this.addTypedialogV = true
      } else {
        if (this.typeName.length > 2) {
          if (this.typeCache.id) {
            softTypePut({
              id: this.typeCache.id,
              name: this.typeName,
              remark: this.typeDec,
              sortNum: 0
            }).then(res => {
              if (res.code === 200) {
                this.$message.success('修改成功')
                this.addTypedialogV = false
                this.getTypeList()
              }
            })
          } else {
            softTypeAdd({
              name: this.typeName,
              remark: this.typeDec,
              sortNum: 0
            }).then(res => {
              if (res.code === 200) {
                this.$message.success('添加成功')
                this.addTypedialogV = false
                this.getTypeList()
              }
            })
          }
        } else {
          this.$message.warning('请输入2-4个字符的软件类型!')
        }
      }
    },
    // getTypeList() {
    //   softTypeList({
    //     limit: 20,
    //     page: 1
    //   }).then(res => {
    //     if (res.code === 200) {
    //       this.options = []
    //       res.data.data.map(item => {
    //         if (item.id !== '1025' && item.id !== '55904214559285248') {
    //           this.options.push(item)
    //         }
    //       })
    //       console.log(this.options)
    //     }
    //   })
    // },
    copySpecialTopicUrl(row) {
      var oInput = document.createElement('input') // 创建一个隐藏input（重要！）
      oInput.value = row.downloadUrl // 赋值
      document.body.appendChild(oInput)
      oInput.select() // 选择对象
      document.execCommand('Copy') // 执行浏览器复制命令
      oInput.className = 'oInput'
      oInput.style.display = 'none'
      this.$message.success('复制成功')
    },
    getList() {
      this.listLoading = true
      softInstallList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.totalCount
        this.listLoading = false
      })
    },
    fetchData() {
      this.getList()
    },
    tabChange(params) {
      this.listQuery.type = params
      this.getList()
      // if (params !== '55904214559285248') {
      //   this.getList()
      // } else {
      //   // this.activeName = '1025'
      // }
      this.tabActive = params
    },
    handleDetails(params) {
      this.$router.push({ path: '/dashboard/softwareLibraryDetails',
        query: {
          software: 'up'
        }})
    },
    handleEdit(index, row) {
      // window.location.href = row.uninstallString
      this.$get('http://localhost:9007/softinfo/', {
        cmd: 'uninstall',
        param: row.uninstallString
      })
    },
    handleDelete(index, row) {
    },
    handleClick(tab, event) {
    }
  }

}
</script>

<style lang="scss" scoped>
  li {
    display: inline;
    // height: 92px;
    cursor: pointer;
  }
  .tabli{
    font-size: 8px;
    padding: 5px;
    text-align: center;
    height: 42px;
    width: 92px;
    background-size: cover;
    // background-image: url('../../assets/icons_slices/img_pop.png');
  }
  .bagPop{
    color: aliceblue;
        border-radius: 3px;
    background-color: rgb(64, 158, 255);
    // background-image: url('../../assets/icons_slices/img_pop.png');
  }
  .softwareLibrary-container{
    font-size: 14px;
    color: #222222;
  }
  .desc{
    font-size: 13px;
    color: #999999;
  }
.softwareLibrary {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
